— input 的全部类型

— input 的accept、multiple 属性介绍

— input 事件监听

— 更改input文件上传css样式

— 上传图片文件 获取图片地址

— 上传file文件后彻底清空上传文件

— 各种文件类型

input 框的类型到底有多少种呢，零零散散算下来有二十多种

总述

常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。

text类型 文本框

注意：当input框没有给类型的时候，默认text文本框

password类型 密码框

number类型 数字框

button类型 按钮

reset类型 重置按钮

注意：reset类型 一般用于form表单中

submit类型 提交按钮

注意：submit类型 一般用于form表单中

hidden类型 隐藏

注意：hidden类型会将input隐藏，所以什么都看不到，而且被隐藏的input框也不会占用空间。

radio类型 单选按钮

checkbox类型 复选按钮

image类型 图片

color类型 颜色

range类型 滑动条

date类型 日期

month类型 月份

week类型 周

time类型 时间

datetime类型 时间、日、月、年（UTC时间）

注意：火狐、360浏览器都对datetime不支持，会按照text类型处理。

datetime-local类型 时间、日、月、年（本地时间）

tel类型 电话

注意：这个类型我认为没有实际用处

email类型 邮箱

注意：火狐对email类型有校验，360浏览器无校验。

=======

好了接下来是今天的重点了

< input > type 类型为 file 的 input 元素，使得用户可以选择一个或多个元素以提交表单的方式传到服务器上，或者通过Javascript 的 file Api对文件进行操作。

该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割。

accept 属性接受一个逗号分隔的 MIME 类型字符串, 如:

multiple属性代表是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

在 input 元素上监听 change 事件就能获取到用户上传的文件信息，包括文件名、上传时间、文件大小等等，通过 FileReader 我们还可以将图片文件转换成 base64 编码格式实现预览图片功能。

在 change 事件监听的函数内，event.target.files 就是用户上传的图片信息。

原生的input file 实在是不好看，外加不好修改 CSS。所以用来其他的方式。

第一种：vue3.0的写法 把 input file 样式设置display:none; 隐藏, 或者 设置透明度 opacity设置为0，然后用一个好看的按钮代替点击，之后，在input中设置ref 用来获取数据。 js中获取ref然后链接设置样式的点击事件

html代码

js 代码

效果

第二种方法：vue2.0 写法，vue2.0很多种写法，我举例一种：使用 label元素 与 input file控件关联,然后隐藏 input。也是一样的。只不过不用调用方法了。

html代码

js代码

上次写过如何上传文件，上传成功之后，会出现一些问题。

当我打开上传的文件，但是没有点击上传，然后关闭弹窗，接着继续上传刚才的那个文件。为了满足产品组的要求，我们一般都会把样式进行一定的覆盖。

但这就会出现一定的问题。按照上面说的那种情况，当我再次打开之后覆盖样式的内容为空。

其实刚开始是百思不得其解的，最后想了一下，应该是file文件内容没有清空的原因造成的。

上网查各种清空的方法。

都是直接给获取到的files文件的value 赋值为空，但是这种方式治标不治本，不能彻底清理文件达到解决问题的方法

挣扎了两个小时解决了文件彻底清理的方法，就是外部加一个form表单，然后清空form表单里面的内容。 如上图一样，我给input标签外面增加一个form标签，id为DataForm

我们产品需求上传文件是在一个弹框里面的。

所以我每次打开弹框的时候，只需要清空一下该内容就行。

具体代码

期待三连！！！